import 'package:car_map/mode/time_scale.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TimeScaleWidget extends StatefulWidget{

  List<TimeScale> timeScaleList;
  TimeScaleWidget({Key key,this.timeScaleList}):super(key:key);

  @override
  _timeScaleState createState()=>_timeScaleState();
}

class _timeScaleState extends State<TimeScaleWidget>{

  int currentIndex=0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.only(top: 10.0,bottom: 5.0,left: 5.0,right: 5.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          border:Border.all(
              color: Colors.blue,
              width: 0.5
          )
      ),
      height: ScreenUtil().setHeight(50.0),
      child: ListView.builder(itemBuilder: (context,index){
        return timeScaleItem(index,widget.timeScaleList[index]);
      },itemCount:widget.timeScaleList.length ,scrollDirection: Axis.horizontal),

    );
  }

  Widget timeScaleItem(int index,TimeScale timeScale){
    return InkWell(
      onTap: (){
        setState(() {
          currentIndex=index;
        });
      },
      child: Container(
        alignment: Alignment.center,
        width: ScreenUtil().setWidth(730/widget.timeScaleList.length),
        decoration: BoxDecoration(
          color: currentIndex==index?Colors.blue:Colors.white,
            border: Border(
                right: BorderSide(
                  color: Colors.blue,
                  width: 0.5,
                )
            )
        ),
        child:  Text(
          '${timeScale.title}',
          style: TextStyle(
            color:currentIndex==index?Colors.white:Colors.blue,
            fontSize: ScreenUtil().setSp(23.0)
          ),
        ),
      ),
    );
  }

}